<template>
  <div class="fullMain">
    <x-header :left-options="{backText: '',showBack: back}">
      {{titleType}}查看
      <!-- 修改删除的提示框 -->
      <div v-transfer-dom>
        <confirm
          v-model="isShowConfirm"
          :hide-on-blur="true"
          title="请选择操作"
          cancel-text="修改"
          confirm-text="退出"
          @on-cancel="modifyReview()">
        </confirm>
      </div>
    </x-header>
    <div style="height:20px"/>
    <div class="mainbBg">
<!--      <div >-->
<!--        <i class="fa fa-chevron-left mT returnIcon" @click="back"></i>-->
<!--        <span class="ids">-->
<!--          姓名：{{ userInfo.detail.name}}-->
<!--        </span>-->
<!--      </div>-->
      <div style="border: #f5f5f5 solid 2px;display: flex;margin-top: 0">
        <popup-radio class="popupradio-custom" :placeholder='placeholderOfGroup'
                     v-model="group" :options="allGroups" @on-show="getAllGroups"
                     style="float:left;max-width: 40%;padding-left: 10px;padding-right: 5px;border: none"></popup-radio>
        <popup-radio class="popupradio-custom" :placeholder="placeholder_member" :options="groupMembers"
                     v-model="member"
                     @on-show="getGroupMembers"
                     style="float:left;;max-width: 20%;padding: 10px 5px;;border: none"></popup-radio>
        <br>
        <div v-if="showColumns">
          <Popup-picker :data='datePickList' :columns='showColumns' v-model='pickDate' @on-hide='resetDate' placeholder="选择日期："
                        style="color: #999999;float:left;;max-width: 40%;;padding: 10px 5px;" show-name ></Popup-picker>
        </div>
      </div>

      <!--      循环展示结果-->
      <div class="groupDiv" v-if="this.result"
           style="height:calc(100% - 60px);margin-left:10px;margin-right:10px;overflow:auto;width:95%;">
        <div class="chatDiv" v-for="item in this.result" :key="item.reportId">
          <div style="display: inline-block;width:50px;height: auto;padding: 0;margin-right: 0;border: none">
            <img alt="" class="myHeadIcon" v-bind:src="item.avatar">
            <label>{{item.userName}}</label>
            <div style="font-size: xx-small" v-if="item.date">{{changeDateShow(item.date)}}</div>
          </div>
          <div style=" line-height:20px;width: 80%;float: right"
               @touchstart="touchstart(item)" @touchmove="touchmove()" @touchend="touchend()"
               :style="{background:(changeColor && item === temp?'#aeaeae':'white')}">
            <div>
              <span class="tag">学术类</span><br>
              <div v-if="item.academic">
                <p v-show="item.academic.paperNum">
                  发表论文：{{item.academic.paperNum}}篇:名称：{{item.academic.paperName}}</p>
                <p v-show="item.academic.patentNum">
                  申请专利：{{item.academic.patentNum}}篇:名称：{{item.academic.patentName}}</p>
                <p v-show="item.academic.declarationNum">
                  撰写申报书：{{item.academic.declarationNum}}个:名称：{{item.academic.declarationName}}</p>
                <p v-show="item.academic.paperShare">论文分享：{{item.academic.paperShare}}次</p>
              </div>
              <span class="tag">工程类</span><br>
              <div v-if="item.project">
                <div v-for="(pItem,pIndex) in item.project.projectSems" :key="pIndex.projectName" class="projectItem">
                  <p>项目名称:
                    {{pIndex+1}}：
                    {{pItem.projectName}}</p>
                  <p>代码量：{{pItem.projectCode}}行</p>
                  <p>有效工作：{{pItem.effectiveWork}}</p>
                  <p>时间消耗与项目成效：{{pItem.effect}}</p>
                  <hr>
                </div>
                <p v-show="item.project.softwareRight">
                  软件著作：{{item.project.softwareRight}}个</p>
                <p v-show="item.project.gameNum">
                  参与比赛：{{item.project.gameNum}}次:名称：{{item.project.gameName}}</p>
                <p v-show="item.project.skillShare">技术分享：{{item.project.skillShare}}次</p>
              </div>
              <span class="tag">事务类</span><br>
              <div v-if="item.item">
                <p v-show="item.item.procurementNum">
                  负责采购：{{item.item.procurementNum}}项:名称：{{item.item.procurementName}}</p>
                <p v-show="item.item.fixedAssetsNum">
                  固定资产管理：{{item.item.fixedAssetsNum}}项:名称：{{item.item.fixedAssetsName}}</p>
                <p v-show="item.item.labActivityPlan">
                  实验室活动策划：{{item.item.labActivityPlan}}项</p>
                <p v-show="item.item.managementNum">
                  其它管理：{{item.item.managementNum}}项:名称：{{item.item.managementName}}</p>
              </div>
              <span class="tag">学习类总结/心得感悟</span><br>
              <div v-if="item.academic">
                <p v-show="item.academic.feeling">{{item.academic.feeling}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {PopupPicker, XHeader, Group, Calendar, PopupRadio, Confirm, TransferDomDirective as TransferDom} from 'vux'
  import {mapState} from 'Vuex'
  import {compareByProp} from 'utilMethods/sort'
  import group from 'api/group'
  import year from 'api/year'

  export default {
    name: 'S_view_annual_review',
    directives: {
      TransferDom
    },
    data () {
      return {
        // 长按事件相关
        temp: {},
        startX: 0,
        startY: 0,
        timeOutEvent: 0,
        changeColor: false,
        //下拉列表-群
        placeholderOfGroup: '请下拉选择要查看的群',//年报选择群的下拉列表
        group: '',//选择要显示年报的群，
        allGroups: [], // 存放所有群
        //下拉列表-成员
        placeholder_member: '成员',
        groupMembers: [], // 群成员
        member: '',//选择的成员
        //弹出组件-选择日期
        // choseDate: '',
        datePickList: [
          {
          name: '2019年',
          value: '2019',
          parent: 0
        },
          {
            name: '',
            value: '012',
            parent: '2019'
          },
          {
            name: '',
            value: '12',
            parent: '012'
          },
          {
          name: '2020年',
          value: '2020',
          parent: 0
        }, {
          name: '三月',
          value: '003',
          parent: '2020'
        }, {
          name: '四月',
          value: '004',
          parent: '2020'
        }, {
          name: '五月',
          value: '005',
          parent: '2020'
        }, {
          name: '六月',
          value: '006',
          parent: '2020'
        }, {
          name: '七月',
          value: '007',
          parent: '2020'
        }, {
          name: '八月',
          value: '008',
          parent: '2020'
        }, {
          name: '第一周',
          value: '01',
          parent: '003'
        }, {
          name: '第二周',
          value: '02',
          parent: '003'
        }, {
          name: '第三周',
          value: '03',
          parent: '003'
        }, {
          name: '第四周',
          value: '04',
          parent: '003'
        }, {
          name: '第一周',
          value: '01',
          parent: '004'
        }, {
          name: '第二周',
          value: '02',
          parent: '004'
        }, {
          name: '第三周',
          value: '03',
          parent: '004'
        }, {
          name: '第四周',
          value: '04',
          parent: '004'
        }, {
          name: '第一周',
          value: '01',
          parent: '005'
        }, {
          name: '第二周',
          value: '02',
          parent: '005'
        }, {
          name: '第三周',
          value: '03',
          parent: '005'
        }, {
          name: '第四周',
          value: '04',
          parent: '005'
        }, {
          name: '第一周',
          value: '01',
          parent: '006'
        }, {
          name: '第二周',
          value: '02',
          parent: '006'
        }, {
          name: '第三周',
          value: '03',
          parent: '006'
        }, {
          name: '第四周',
          value: '04',
          parent: '006'
        }, {
          name: '第一周',
          value: '01',
          parent: '007'
        }, {
          name: '第二周',
          value: '02',
          parent: '007'
        }, {
          name: '第三周',
          value: '03',
          parent: '007'
        }, {
          name: '第四周',
          value: '04',
          parent: '007'
        }, {
          name: '第一周',
          value: '01',
          parent: '008'
        }, {
          name: '第二周',
          value: '02',
          parent: '008'
        }, {
          name: '第三周',
          value: '03',
          parent: '008'
        }, {
          name: '第四周',
          value: '04',
          parent: '008'
        }],
        showColumns: 0,//控制列数
        pickDate: [],//存放选中的日期
        //其它
        isShowConfirm: false,// 是否显示弹窗
        readonly: false,
        flagOfInit: true,//标志是否是初始化
        titleType: '',//动态标题
        result: [],//接收返回结果
        revType: '',//周期汇总类型
        //接口相关
        reportType: 0,
        date: '',//存放查询时的date
        editDate: {
          year: '2020',
          month: '003',
          flag: '',//用于设置为填写类型的标志，01-04为周报，05为月报，年报任意都可（因为年报 不查看本数据）
        },
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['reviewType', 'recordReviewItem']),
    },
    watch: {
      group (val) {
        this.checkAll()
      },
      member (val) {
        this.checkAll()
      },
      pickDate (val) {
        this.resetDate()
      },
      result (val) {
        console.log('resutTTTTTT')
        console.log(this.result)
      },
      showColumns(val) {
      }
    },
    mounted () {
      this.init()
    },
    components: {
      PopupPicker,
      XHeader,
      Group,
      Calendar,
      PopupRadio,
      Confirm
    },
    methods: {
      init(){

        this.revType = this.$store.state.reviewType
        //初始化约定的格式
        switch (this.revType) {
          case 'weekReview': {
            this.titleType = '周报'
            this.editDate.flag = '01'
            this.reportType = 1
            this.showColumns=3
            break
          }
          case 'monthReview': {
            this.titleType = '月报'
            this.editDate.flag = '05'
            this.reportType = 2
            this.showColumns=2
            break
          }
          case 'yearReview': {
            this.titleType = '年报'
            this.editDate.flag = '12'
            this.editDate.month = '012'
            this.reportType = 3
            this.showColumns=1
            break
          }
        }
        console.log('init')
        console.log('CCCCC'+this.showColumns)
        this.date = this.editDate.year + '-' + this.editDate.month.substring(1, 3) + '-' + this.editDate.flag

        this.getAllGroups()
        this.checkAll()
      },
      back () {
        this.$router.go(-1)
      },
      changeDateShow (date) {
        let changeDate = date
        let newDate = ''
        const year = changeDate.substring(0, 4)
        const month = changeDate.substring(5, 7)
        const flag = changeDate.substring(8, 10)
        let day = ''
        switch (flag) {
          case '01': {
            day = '第一周'
            break
          }
          case '02': {
            day = '第二周'
            break
          }
          case '03': {
            day = '第三周'
            break
          }
          case '04': {
            day = '第四周'
            break
          }
        }
        if (this.reportType === 1) {
          newDate = year + '年' + month + '月' + ' ' + day
        } else if (this.reportType === 2) {
          newDate = year + '年' + month + '月'
        } else if (this.reportType === 3) {
          newDate = year + '年'
        }
        return newDate
      },
      async checkAll () {
        if (this.member == '') {
          try {
            const temp = await year.getYearReportByGroup({
              date: this.date,
              groupId: this.group,
              reportType: this.reportType
            })
            console.log('group')
            console.log(temp)
            if (temp.code === 1) {
              this.result = temp.data
            }
          } catch (err) {

            console.log('ERROR' + err)
          }
        } else {
          try {
            const temp = await year.getPersonYearReport({
              date: this.date,
              reportType: this.reportType,
              userId: this.member
            })
            console.log('person')
            console.log(temp)
            if (temp.code === 1) {
              //将code键值对删除，否则遍历的时候会将code也渲染上去，会多出一个没有内容没有头像的itme框；
              // 若将temp.data赋值给this.result，会遍历data，渲染出9个没有内容没有头像的itme框（因为item下有9的属性）
              delete temp.code
              this.result = temp
            }
          } catch (err) {
            console.log('ERROR' + err)
          }
        }

      },
      touchstart (item) {
        console.log('jinlaile')
        if (item.userId === this.userInfo.userId) {
          console.log('触摸')
          console.log(item.userId + 'and' + this.userInfo.userId)
          console.log('进入触摸')
          this.temp = item
          this.changeColor = true
          this.timeOutEvent = 0
          this.timeOutEvent = setTimeout(this.longPress, 500)
          this.startX = event.changedTouches[0].pageX
          this.startY = event.changedTouches[0].pageY
          this.$store.commit('recordReviewItem', item)
        }
      },
      touchmove () {
        this.changeColor = false
        // event.preventDefault()
        var moveEndX = event.changedTouches[0].pageX
        var moveEndY = event.changedTouches[0].pageY
        var X = moveEndX - this.startX
        var Y = moveEndY - this.startY
        if (X != 0 && Y != 0) {
          clearTimeout(this.timeOutEvent)// 清除定时器
          this.timeOutEvent = 0
        }
      },
      touchend () {
        this.changeColor = false
        if (this.timeOutEvent === 500) {
          clearTimeout(this.timeOutEvent)
          this.isShowConfirm = true
        }
        clearTimeout(this.timeOutEvent)// 清除定时器
      },
      longPress () {
        this.changeColor = false
        this.timeOutEvent = 0
        this.isShowConfirm = true
      },
      modifyReview () {
        this.$router.push({name: 'S_annual_review'})
      },
      // 获取我加入的所有群
      async getAllGroups () {
        this.allGroups.length = 0
        const result = await group.getGroupsBeIn()
        if (result.code === 0) {
          this.showAlert('查询失败，请重试。')
        } else if (result.data.length === 0) {
          // this.showAlert('您暂时没有创建任何群')
        } else {
          let key, value
          result.data.forEach(element => {
            key = element.groupId
            value = element.detail.groupName
            this.allGroups.push({key, value})
          })
          // rock wang: 群名排序
          this.allGroups.sort(compareByProp('value'))
          //如果是初始化，就设置默认群组
          if (this.flagOfInit) {
            const max = this.allGroups.length - 1
            this.group = this.allGroups[max].key
            this.placeholderOfGroup = this.allGroups[max].value
            this.flagOfInit = false
          }
        }
        //初始化成员列表与日期列表
        this.groupMembers.length = 0
        this.member = ''
      },
      // 获取群内成员
      async getGroupMembers () {
        this.groupMembers.length = 0
        let tempMembers = []
        let key, value
        console.log('this.group::' + this.group)
        tempMembers = await group.getInfoOfMembers({groupId: this.group})
        console.log('tempMembers' + tempMembers)
        tempMembers.data.forEach(element => {
          key = element.userId
          value = element.detail.name
          this.groupMembers.push({key, value})
        })
      },
      resetDate () {
        console.log('chose DATE：：：：：' + this.pickDate + typeof this.pickDate)
        this.date = ''
        if (this.reportType === 1) {
          this.date = this.pickDate[0] + '-' + this.pickDate[1].substring(1, 3) + '-' + this.pickDate[2]
        } else if (this.reportType === 2) {
          this.date = this.pickDate[0] + '-' + this.pickDate[1].substring(1, 3) + '-' + '05'
        } else if (this.reportType === 3) {
          this.date = this.pickDate[0] + '-12-12'
        }
        console.log(this.date + ']]]]]')
        this.checkAll()
      }
    },
  }
</script>
<style lang="less" scoped>
  .myHeadIcon {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-top: 5px;
  }

  p {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  //这里是屏蔽长按复制
  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none; //用这个ios就不行了
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  input, textarea {
    -webkit-user-select: auto;
  }
</style>
